<template>

  <div>
    <top-list :activeIndex="4+''"></top-list>
<!--    <el-menu-->
<!--      :default-active="activeIndex"-->
<!--      class="el-menu-demo"-->
<!--      mode="horizontal"-->
<!--      @select="handleSelect"-->
<!--      background-color="#545c64"-->
<!--      text-color="#fff"-->
<!--      active-text-color="#ffd04b">-->
<!--      <el-menu-item index="0" style="margin-right: 15%">文件列表</el-menu-item>-->
<!--      <el-menu-item index="1" style="margin-right: 15%">数据监控</el-menu-item>-->
<!--      <el-menu-item index="2" style="margin-right: 15%">任务信息</el-menu-item>-->
<!--      <el-menu-item index="3" style="margin-right: 15%">受试者列表</el-menu-item>-->
<!--      <el-menu-item index="4" >设备管理</el-menu-item>-->
<!--    </el-menu>-->
    <div style="width: 50%;margin-left: 20px">

    <uploader
      ref="uploader"
      :options="options"
      :autoStart=false
      :file-status-text="fileStatusText"
      @file-added="onFileAdded"
      @file-success="onFileSuccess"
      @file-progress="onFileProgress"
      @file-error="onFileError"
      v-if="isCollectRole"
      class="uploader-ui">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <div>
          <uploader-btn id="global-uploader-btn" :attrs="attrs" ref="uploadBtn"  >文件上传<i class="el-icon-upload el-icon--right"></i></uploader-btn>
        </div>
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
    </div>
<!--    <el-button plain type="primary" @click="deviceEdit(0)" style="margin-left: 20px;margin-top: 20px">添加设备</el-button>-->
    <el-table
      :data="dataList"
      border
      stripe
      v-loading="dataListLoading"
      style="width: 100%; margin-top: 20px; margin-left: 20px">
      <el-table-column prop="fileName" header-align="center" align="center" label="文件名"></el-table-column>
      <!--      <el-table-column prop="refer_name" header-align="center" align="center" label="参考导联名"></el-table-column>-->
      <el-table-column prop="totalSize" header-align="center" align="center" label="文件大小"></el-table-column>
      <!--      <el-table-column prop="electrode_distribution" header-align="center" align="center" label="电极坐标分布"></el-table-column>-->
      <el-table-column prop="createTime" header-align="center" align="center" label="上传时间"></el-table-column>
      <el-table-column prop="qa" header-align="center" align="center" label="QA"></el-table-column>
<!--      <el-table-column prop="tag" header-align="center" align="center" label="标签"></el-table-column>-->
      <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="fileEdit(scope.row.id,scope.row.tag)">编辑</el-button>
          <el-button type="text" size="small" @click="fileDelete(scope.row.id,scope.row.fileName)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px;"
    >
    </el-pagination>
    <UploadUpdate v-if="updateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></UploadUpdate>
  </div>
</template>

<script>
import UploadUpdate from './upload-update1'
import deviceUpdate from './device-update'
import uploadFile from '../../api/uploadFile'
import {ACCEPT_CONFIG} from '@/config';
import SparkMD5 from 'spark-md5';
import uploadfile from "@/api/uploadFile";
import data from '../../api/data'
import device from '../../api/device'
import myUtils from '../../api/myUtils'
import TopList from '@/components/TopList'
export default {
  components: { UploadUpdate,TopList },
  data() {
    return {
      activeIndex: '0',
      updateVisible:false,
      dataList: [],
      dataForm:{},
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      isCollectRole:false,
      options: {
        //目标上传 URL，默认POST
        target: process.env.BASE_API+"/testee/file/chunk",
        //target:"http://localhost:8090/uploader/chunk",
        //分块大小(单位：字节)
        chunkSize: '2048000',
        //上传文件时文件内容的参数名，对应chunk里的Multipart对象名，默认对象名为file
        fileParameterName: 'upfile',
        //失败后最多自动重试上传次数
        maxChunkRetries: 3,
        //是否开启服务器分片校验，对应GET类型同名的target URL
        testChunks: true,
        /*
        服务器分片校验函数，判断秒传及断点续传,传入的参数是Uploader.Chunk实例以及请求响应信息
        reponse码是successStatuses码时，才会进入该方法
        reponse码如果返回的是permanentErrors 中的状态码，不会进入该方法，直接进入onFileError函数 ，并显示上传失败
        reponse码是其他状态码，不会进入该方法，正常走标准上传
        checkChunkUploadedByResponse函数直接return true的话，不再调用上传接口
        */
        checkChunkUploadedByResponse: function (chunk, response_msg) {
          let objMessage = JSON.parse(response_msg);
          if (objMessage.skipUpload) {
            return true;
          }
          return (objMessage.uploadedChunks || []).indexOf(chunk.offset + 1) >= 0;
        }
      },
      attrs: {
        accept: ACCEPT_CONFIG.getAll()
      },
      fileStatusText: {
        success: '上传成功',
        error: '上传失败',
        uploading: '上传中',
        paused: '暂停',
        waiting: '等待上传'
      },

    }
  },
  created() {
    this.getDataList();
    let role =myUtils.getRole(this.$route.query.subjectPkId,this.$store.getters.roles,this.$store.getters.isSystemAdministrator);
    if(role==1||role==3||role==5||role==7)
    {

      this.isCollectRole = true;
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      if(key==='0')
      {
        this.$router.push({path:`/upload/file-list?subjectPkId=${this.$route.query.subjectPkId}`})
      }
      if(key==='1')
      {
        // this.$router.push(0)
        this.$router.push({path:`/upload/research-manager?subjectPkId=${this.$route.query.subjectPkId}`})
      }
      else if(key==='2')
      {
        this.$router.push({path:`/upload/task?subjectPkId=${this.$route.query.subjectPkId}`})
      }
      else if(key==='3')
      {
        this.$router.push({path:`/upload/subject-manager?subjectPkId=${this.$route.query.subjectPkId}`})
      }
      else if(key==='4')
      {
        this.$router.push({path:`/upload/device?subjectPkId=${this.$route.query.subjectPkId}`})
      }
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    getDataList()
    {
      uploadFile.getFileList(
        this.$store.getters.name,
        this.pageIndex,
        this.pageSize,
        0,
      ).then(
        (response)=>{
              this.dataList = response.data.records;
              this.totalPage = response.data.total;

          this.dataList.forEach(
            item=>{
              item.totalSize = ((item.totalSize/1024)/1024).toFixed(2) + "M"
              if(item.qa==-1)
              {
                item.qa = "未包含QA的mat文件"
              }

              item.createTime = item.createTime.replace('T',' ').split('.')[0]
            }


          )
          console.log(this.dataList)

        }
      )



    },
    fileDelete(id,name)
    {
      //uploadFile.deleteByid(id)
      this.$confirm(
        `确定对[文件名为：${name}]进行删除操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(()=>{
        uploadFile.deleteByid(id).then(( response ) => {
          console.log(response)
          if (response.code  === '000000') {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 700,
              onClose: () => {
                this.getDataList()
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      })



    },
    fileEdit(id,tag,filePath)
    {
      this.updateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    onFileProgress(){

    },
    onFileAdded(file) {
      this.computeMD5(file);
    },
    /*
    第一个参数 rootFile 就是成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件；
    第二个参数 file 就是当前成功的 Uploader.File 对象本身；
    第三个参数就是 message 就是服务端响应内容，永远都是字符串；
    第四个参数 chunk 就是 Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status就是
    */
    onFileSuccess(rootFile, file, response, chunk) {
      //refProjectId为预留字段，可关联附件所属目标，例如所属档案，所属工程等
      file.refProjectId = "123456789";


      uploadfile.mergeFile(file).then( responseData=> {
          this.getDataList()
      }).catch(function (error){
        console.log("合并后捕获的未知异常："+error);
      });
    },
    onFileError(rootFile, file, response, chunk) {
      console.log('上传完成后异常信息：'+response);
    },

    /**
     * 计算md5，实现断点续传及秒传
     * @param file
     */
    computeMD5(file) {
      file.pause();

      //单个文件的大小限制2G
      let fileSizeLimit = 2 * 1024 * 1024 * 1024;
      console.log("文件大小："+file.size);
      console.log("限制大小："+fileSizeLimit);
      if(file.size > fileSizeLimit){
        this.$message({
          showClose: true,
          message: '文件大小不能超过2G'
        });
        file.cancel();
      }

      let fileReader = new FileReader();
      let time = new Date().getTime();
      let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
      let currentChunk = 0;
      const chunkSize = 10 * 1024 * 1000;
      let chunks = Math.ceil(file.size / chunkSize);
      let spark = new SparkMD5.ArrayBuffer();
      //由于计算整个文件的Md5太慢，因此采用只计算第1块文件的md5的方式
      let chunkNumberMD5 = 1;

      loadNext();

      fileReader.onload = (e => {
        spark.append(e.target.result);

        if (currentChunk < chunkNumberMD5) {
          loadNext();
        } else {
          let md5 = spark.end();
          file.uniqueIdentifier = md5;
          file.resume();
          console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`);
        }
      });

      fileReader.onerror = function () {
        this.error(`文件${file.name}读取出错，请检查该文件`)
        file.cancel();
      };

      function loadNext() {
        let start = currentChunk * chunkSize;
        let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
        currentChunk++;
        console.log("计算第"+currentChunk+"块");
      }
    },
    close() {
      this.uploader.cancel();
    },
    error(msg) {
      this.$notify({
        title: '错误',
        message: msg,
        type: 'error',
        duration: 2000
      })
    }



  },

}
</script>
<style>
.uploader-ui {
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  font-family: Microsoft YaHei;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-ui .uploader-btn {
  margin-right: 4px;
  font-size: 12px;
  border-radius: 3px;
  color: #FFF;
  background-color: #396a94;
  border-color: #409EFF;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}
.uploader-ui .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

</style>
